<template>
	<view class="pageHome">
		<view class="offDuty">
			<view class="getOff">
				<p>距离{{text}}还剩 </p>
				<text class="offDutyTime">{{offDutyTime}}</text>
			</view>
			<view class="workDay">
				<p>本月上班(天) </p>
				<input  class="offDutyTime" type="text" v-model="workDays" @blur="workDayBlur">
				<!-- <text class="offDutyTime">{{workDays}}</text>天 -->
			</view>
			
		</view>
		<view class="todayPay">
			<view class="day">
				<p>今日生活费到账</p>
				<span class="pay animate__animated animate__flash">{{ salary.toFixed(2) }}</span>
			</view>
			<view class="month">
				<p>本月生活费到账</p>
				<span class="pay animate__animated animate__flash">
				<!-- {{( monthlyWages +salary).toFixed(2)  }} -->
				{{ (workPay*(workDays-1)).toFixed(2)  }}
				</span>
			</view>
			
			<button @click="goEdit" class="edit">设置</button>
			<text class="attention" >注：本月上班时间是按双休计算，如有不同，点击本月上班自行修改</text>
		</view>
	</view>
</template>

<script>
	import {
		getTimestamp,
		formatTime
	} from "@/utils/pay.js"
	export default {
		data() {
			return {
				salary: 0,
				monthlyWages:0,
				increase: 0,
				settledWages: 0,
				dataFrom: null,
				remainSeconds: 0,
				offDutyTime: 0,
				text:'下班',
				timer:null,
				workDays:0,
				workPay:0,
				bgcAudioContext:{}
				
			};
		},
		onLoad(options) {
			// this.toDayPay()
			if (uni.getStorageSync('pay')) {
				this.dataFrom = uni.getStorageSync('pay')
			}
		},
		onShow() {
			this.dataFrom = uni.getStorageSync('pay')
			this.initData()
		},
		mounted() {
			// this.initData()
		},
		methods: {

			// 倒计时函数
			updateCountdown(endTime) {
				// 获取当前时间
				const now = new Date();
				// 构造指定时间点
				const [hour, minute] = endTime.split(':'); // 将时间字符串按冒号分隔成时和分两个数字
				const targetTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hour, minute, 0);
				// 计算剩余时间（单位：毫秒）
				let timeDiff = targetTime.getTime() - now.getTime();
				this.remainSeconds = Math.floor(timeDiff / 1000); // 将剩余时间转换为秒数
				this.offDutyTime = formatTime(this.remainSeconds)
			},

			goEdit() {
				uni.navigateTo({
					url: '/pages/luckydraw/index'
				})
			},
			// 当前时间到开始上班时间过了多少秒
			getSecondsByTime(hour, minute, second) {
				// 获取当前时间戳
				const now = new Date();
				const timestamp = now.getTime();
				// 获取今天的指定时间的时间戳
				const year = now.getFullYear();
				const month = now.getMonth() + 1;
				const day = now.getDate();
				const target = new Date(year, month - 1, day, hour, minute, second);
				const targetTimestamp = target.getTime();
				// 计算已经过了多少秒
				const seconds = Math.floor((timestamp - targetTimestamp) / 1000);
				return seconds;
			},
			initData(){
				this.timer = setInterval(()=>{
					this.toDayPay()
				},1000)
				
				this.month()
			},
			toDayPay() {
				if (this.dataFrom) {
					const timestamp = Date.now() / 1000; // 当前时间秒

					const [hour, minute] = this.dataFrom.startTime.split(':')
					const seconds = this.getSecondsByTime(hour, minute, 0)

					// 上班时间（秒）

					let startTime = getTimestamp(this.dataFrom.startTime)

					let endTime = getTimestamp(this.dataFrom.endTime)

					// 午休时间（秒）
					let restStartTime = getTimestamp(this.dataFrom.restStartTime)

					let restEndTime = getTimestamp(this.dataFrom.restEndTime)

					// 每天上班总时长（秒）
					let workTime = endTime - startTime

					// 每天休息时长（秒）
					let restTime = restEndTime - restStartTime

					// 每秒所得工资
					this.increase = this.dataFrom.monthlyPay / this.dataFrom.monthlyWork / (workTime - restTime)

					let settledWages = 0;
					
					
					if(timestamp<startTime){
						this.text = '上班'
						this.updateCountdown(this.dataFrom.startTime)
					}else if(timestamp>endTime){
						clearInterval(this.timer)
						this.text = '下班'
						this.offDutyTime = 0
						// uni.setStorageSync('workDays',this.workDays +1)
						this.salary = this.dataFrom.monthlyPay / this.dataFrom.monthlyWork
						

					}else{
						if(timestamp>restStartTime && timestamp<restEndTime){

							this.text = '午休结束'
							this.updateCountdown(this.dataFrom.restEndTime)
							
						}else if(timestamp<restStartTime){
							settledWages = this.increase * seconds
							this.text = '午休'
							this.updateCountdown(this.dataFrom.restStartTime)
							this.salary = settledWages
							this.salary += this.increase;
							
						}else{
							settledWages = this.increase * seconds - restTime * this.increase
								this.updateCountdown(this.dataFrom.endTime)
								this.salary = settledWages
								
								this.salary += this.increase;

						}
					}
				}
			},
			month(){
				const now = new Date() // 获取当前时间
				const year = now.getFullYear() // 获取年份
				const month = now.getMonth() + 1 // 获取当前月份（注意要加1）
				const today = now.getDate() // 获取今天的日期
				
				let workDays = 0 // 初始化算作工作日的天数
				let totalDays = 0 // 初始化总天数
				
				for(let i = 1; i <= today; i++) {
				  const date = new Date(year, month - 1, i) // 构造日期对象
				  const day = date.getDay() // 获取星期几
				  if(day !== 0 && day !== 6) { // 不是周末
				    workDays++
				  }
				  totalDays++
				}
				if(uni.getStorageSync('workDays')){
					this.workDays = uni.getStorageSync('workDays')
					
				}else{
					this.workDays = ( workDays -1)
				}

				this.workPay = this.dataFrom.monthlyPay / this.dataFrom.monthlyWork
				// this.monthlyWages = workPay *( workDays -1)
				// uni.setStorageSync('workDays',e.detail.value)
				console.log(`本月已赚${this.monthlyWages}本月已上班 ${this.workDays} 天，共${totalDays}天，${month}月`) // 输出计算结果
			},
			workDayBlur(e){
				this.workDays = e.detail.value
				// uni.setStorageSync('workDays',e.detail.value)
			}
		},

		destroyed() {
			clearInterval(this.timer)
		}
	}
</script>

<style lang="less">
	.pageHome {
		text-align: center;

		.todayPay {
			display: flex;
			justify-content: space-around;
			position: relative;
			margin: 0 auto;
			width: 90vw;
			height: 26vh;
			background-color: #ff0000;
			text-align: center;
			border-radius: 1rem;
			font-size: 32rpx;
			color: orange;

			.pay {
				color: white;
				font-size: 60rpx
			}

			.edit {
				position: absolute;
				left: 1rem;
				bottom: 1rem;
				width: 20vw;
			}
		}

		.offDuty {
			display: flex;
			width: 100vw;
			height: 10vh;
			background-color: red;
			border-radius: 0 0 5rem 5rem;
			color: white;
			font-size: 24rpx;
			.workDay{
				flex: 1;
			}
			.getOff{
				flex: 1;
			}
			.offDutyTime{
				font-size: 48rpx
			}
		}

	.attention{
		position: absolute;
		bottom: 1rem;
		width: 50vw;
		left: 8rem;
		font-size: 24rpx
	}
	}
</style>